Quick-UI-Tour 


Greetings and Welcome!! 
This file is a quick tour of the Cuis User Interface (UI). 


Smalltalk defined Object Oriented. All computation is done by objects sending messages to themselves and each 
other. 


Cuis shares with other Smalltalk implementations the characteristic that all objects are live. All objects can be 
inspected and changed while they are executing. 


There are many great tools waiting to be used. This tour gives an introduction to a few of the most important ones. 
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Cuis Smalltalk 


“Yay, Juan. You GO, guy! ..a great example of malleable software (and a clever mind) at work." 
Dan Ingalls 


"like it... It's nice and clean and simple and pretty. Nice stuff!" 
Alan Kay 


“| think you have a very elegant design aesthetic." 
John Maloney 


Cuis is: 


- Small 
----QUIT----#(9 August 2018 6:34:49.303719 pm) Cuis5.0 - Clean 
- Appropriable 


Like Squeak, Cuis is also: 


- Open Source 
- Self contained 
- Multiplatform 


Perhaps the best way to think of Cuis is as a playground. 


You can open a Cuis image using a portable virtual machine and see the same windows in the same positions pixel- 
per-pixel on Linux, Macintosh, Windows or any operating system where the VM runs. 


You can start an image, do things with it and throw it away or save the image and its record of the changes to be 
opened another time and take up right where you left off. 
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Cuis Smalltalk 


“Yay, Juan. You GO, guy! ..a great example of malleable software (and a clever mind) at work." 
Dan Ingalls 


"like it... It's nice and clean and simple and pretty. Nice stuff" 
Alan Kay 


"| think you have a very elegant design aesthetic." 
John Maloney 


- Clean 
- Appropriable 


Like Squeak, Cuis is also: 


- Open Source 
- Self contained 
- Multiplatform 


If you right-click or cmd-click on the desktop, you will see a World Menu. 


The command button "cmd-" may be a control ("ctrl") key [Linux], an Apple key [MacOS], or some other command 
key based on your keyboard and operating system. 


A three button mouse has: 


e button 1 = left mouse button = select 
e button 2 = right mouse button = menu 
e button 3 = center mouse buttom = halo 


If your mouse or touchpad has less than three buttons, then you can use ctrl-click for button 3 and ctrl-shift-click for 
button 2. 


A World Menu can be used for one-shot selections. Just click on your selection, the action takes place and the menu 
disappears. If you want to keep the menu up to make several selections, click on the push-pin icon in the upper 
right-hand corner. The icon will disappear and the menu will stay up until you dismiss it by clicking on the circle-x 
close button in the upper left-hand corner. 
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Saves method and debugs it 
Saves method, runs it as test and then all tests in class. Opens debugger if error 
Saves method, runs it as test and then all tests in class category. Opens debugger if error 
t it (selection is a valid expression, or selection is over an inspect-ilst) 
t (selection is a valid expression) 
{i.e. accept) 
‘selection is a valid expression) 
5e it (selection is a class name or cursor is over a class-list or message-list) 
rs of it (selection is a message selector or cursor is over a class-list or message-list) 
entors of it (selection is a message selector or cursor is over a class-list or message-list) 


selection 
author initials 
References to it (selection is a class name, or cursor is over a class-list or message-list) 
Enclose within ( and ), or remove enclosing ( and ) 
Enclose within [ and ], or remove enclosing [ and ] 
Enclose within { and }, or remove enclosing { and } 
Enclose within single quotes, or remove enclosing single quotes 
Enclose wi double quotes, or remove enclosing double quotes 
Enclose within backticks, or remove enclosing backticks 
Enclose within < and >, or remove enclosing < and > 


Of particular interest is the Help submenu. 
Editor Keyboard Shortcuts gives helpful command-key usages. 


The Help menu gives access to a lot of good information. 
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Saves method and debugs it 


ou are reading this in fhetoxt tne T ETSE GINGE Window TIES panei a kind of Wortipsce 
dis managed by the S. ‘ditor of Cuis. This means that you can Do (Cmd-d) or Print 
'md-p) statements in order to see the result. If you have a Transcript open, the result will appear in 


‘he SmalltalkEditor enables you to Do or Print a statement when the cursor is in the statement. It is 
, ot necessary to first highlight the entire statement, unless it continues on more than one line. 


is text pane is refreshed each time it is accessed. You can change the examples and run them 
ji hurting anything. Go ahead and experiment! 


e Terse Guide does not attempt to provide the entire protocol of a topic. You are encouraged to 


Cae Lae), La |} A e 


Symbols 

Strings 

Fonts 

Arra 

Ordered Collections 
Sorted Collections 


Also available from the Help Menu is the Terse Guide to Cuis. 


The Terse Guide has many topics and shows code usages. 


You can select or change code in the Terse Guide pages and "Dolt" (cmd-d) or "Printlt" (cmd-p) to see results. Every 
time you re-visit a topic, the page is created again, so feel free to play. 


Cuis5.0-3401-32. image 


AIS TerseGuideHel -- all -- 
Tools-Autocompletio = instance creation 
Tools-syntax Highlig! | TerseGuideWindowilll 
Tools-Code Differ 
Tools-Menus 
Tools-Taskbar 


hn 5/17/2016 21:21 ° instance creation ° 2 implementors ° 2 senders ° No real (non-optimized) Closures ° only in 
base system change set Install-TerseGuide package TerseGu 


. bpenTerseGuide 
TerseGuideWindow openT erseGuide. 
| window help | 
(window + TerseGuideWindow open: (help + TerseGuideHelp new) label: 'Terse Guide’) 
setWindowColor: Theme current workspace. 
help textPane: window textModelM. 


contents: "; 
window: window 


Clicking on World Menu -> Open.. -> Browser brings up a System Browser, from which you can view all the code in 


the Cuis environment. 


The panes are arranged by Category (upper left), Class, Topic, and Method (the code shown in the lower pane). 
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Feature require: #'Graphics-Files-Additional’. 


Clicking World Menu -> Open.. -> Workspace brings up a Workspace window for you to type and run code. 


As you type, the system does syntax highlighting which gives clues to class and method names. If you start typing a 
method name, you can hit the Tab key which will usually give you a "select list" of possible message name 
completions. 


Again, you can select code and Dolt (cmd-d) or Printlt (cmd-p) to get results. 
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When you click on World Menu -> Open.. -> File List you get a multi-pane file browser. 
The upper left pane shows a tree-view of the file system. You click on the small triangles to show/hide subtrees. 


Scroll down and click on the Packages triangle. 
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- CoreUpdates (2018/08/10 13 
» Documentation : 3/08/10 | 
¥ Packages 

» ClipboardExtende; 

}- Geographicinform: 


Morphic 
» Morphic3 
NumCuic 


‘From Cuis 5.0 of 7 November 2016 [latest update: #3063] on 13 March 2017 at 4:14:44 pm'! 
‘Description Please enter a description for this package " 
provides: 'Graphics-Files-Additional' 1 21! 
quires: ‘Compression’ 1 nil nil! 
!classDefinition: #PNGReadWriter category: #'Graphics-Files-Additional' 
ImageReadWriter subclass: #PNGReadWriter 
instanceVariableNam ‘hunk form width height depth backColor bitsPerChannel colorType interlaceMethod 
bitsPerPixel bytesPerScanline thisScanline prevScanline rowSize globalDataChunk unknownChunks palette 
transparentPixelValue filtersSeen cachedDecoderMap bigEndian auxBitBlt auxSource auxDest auxCMap' 
classVariableNames: ‘BPP BlockHeight BlockWidth Debugging StandardColors StandardSwizzleMaps' 
poolDictionaries: " 
category: 'Graphics-Files-Additional"! 
!classDefinition: 'PNGReadWriter class' category: #'Graphics-Files-Additional’! 
PNGReadWriter class 


Clicking on a Directory shows File names in the right hand pane. Clicking on a File entry shows its contents in the 
lower pane. 


Here I clicked on the "Features" directory and the "Graphics-Files-Additional.pck.st" package file. 


The File List is context sensitive. Viewing a text file or an image file or a file with Smalltalk Package code gives you 
different option buttons. 


You can also "right-click" or "double-click" to get a context sensitive menu in many browser panes. This works in 
most browsers. 


In the picture above, a Package File has been selected. Cuis Packages implement system Features. The file shown 
implements a Feature named 'Graphics-Files-Additional' and requires the Feature ‘Compression" be present. 


Clicking on the “installPackage" button has the same effect as running the code in the previous Workspace picture. 


Feature require: #'Graphics-Files-Additional'. 
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File Name 
Compression 1.21 /home/kend/Cuis/Cuis-Smalltalk-Dev/Packages/S' 
Graphics-Files-Addition} /home/kend/Cuis/Cuis-Smalltalk-Dev/Packages/Mé 
1ome d/Cui: s-Smalltalk-Dev, ages/Te 


Package: TerseGuide -- From Cuis 5.0 of 7 November 2016 [latest update: #3403] 
on 11 August 2018 at 11:52:54 am -- Number of system categories 1. -- Number 
of classes: 3. Number of extension methods: 0. Total number of methods: 73. 
Total lines of code: 1785 (24.45 per method). 


ldd ability to dynamically add topic pages from other sources. 


One way of keeping Cuis small and understandable is to use a small core of code and load Package Files to add 
Features. Note the Terse Guide topic ‘Features’. 


World Menu -> Open.. -> Installed Packages shows the packages loaded into your Cuis environment. 


You can create your own packages and add/remove requirements so that any packages your package requires will be 
loaded when you need them. Note the Terse Guide topic ‘Features’. 
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Smalltalks which descend from Squeak, like Cuis, have a system in which all graphic entities are objects called 
Morphs. 


You can get morphs directly via World Menu -> New Morph... 
This brings up a Morph Menu. 
In this case, | selected a Basic Morph called an EllipseMorph. 


| then cmd-clicked on the EllipseMorph to bring up a "halo" of "construction handles" (small circles around the 
Morph) and used the one in the lower right (Change Size) to make it bigger. 
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Feature require: #'Graphics-Files-Additional’. 


Clicking on the blue Menu button gives a menu for the morph. 
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self 

all inst vars 
owner 
submorphs 
location 
layoutNeeded 
layoutSpec 
properties 
extent 

color 
borderWidth 
borderColor 


Selecting debug -> inspect morph gives an Object Inspector tool which allows one to see the inner structure of the 
morph, its "state". 


One can click on a Morph's "instance variables" to see their values, and in turn "inspect" those values. 


You can also write code in the lower pane in which "self" is bound to the object clicked on in the upper left pane. So 
one can do things like changing the setting of the "color" instance variable. 
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Feature require: #'Graphics-Files-Additional’. 


‘four’ + 3. N 


We learn by making mistakes and correcting them. 


If you can make mistakes faster, you can learn faster! 
We like to make mistakes cheap and easy to fix. 


Here | did a silly thing. | typed the code to add the number 3 to a text string and pressed cmd-d (Dolt). And guess 
what? Things broke! 


When this happens | get a textual view of the "code stack" showing what the system was doing when things broke. 
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String(Object)>>shouldNotimplement 

String>>+ 

UndefinedObject>>Dolt 

Compiler>>evaluate:in:to:notif ying:ifFail:logged:profiled: 

[] in SmalltalkEditor>>evaluateSelectionAndDo:ifFail:profiled: 
BlockClosure>>on:do: 
SmalltalkEditor>>evaluateSelectionAndDo:ifFail:profiled: 


fei 4/12/1999 12:55 ° error handling ° 1 implementor ° 388 senders ° No real (non-optimized) Closures ° in no base system change set ° part of base 
system (i.e. not in a package) ° 


error: aString 
“Throw a generic Error exception.” 


thisContext 
stack top 

all temp vars 
aString 


| can move down the stack by selecting a frame just below the active one. Clicking on the lower left pane shows the 
value for self, the String object which gets the message. 
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String>>+ 

UndefinedObject>>Dolt 

Compiler>>evaluate:in:to:notif ying:ifFail:logged:profiled: 

[] in SmalltalkEditor>>evaluateSelectionAndDo:ifFail:profiled: 
BlockClosure>>on:do: 


shouldNotimplement 


“Announce that, although the receiver inherits this message, it should 
not implement it.” 


self error: "This message is not appropriate for this object’ 


thisContext 


SS 
all inst vars stack ok 


Clicking on the next frame down (the "+" frame) shows what the fuss is about and I see the method code for "+" in 
the String class. 
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String(Object)>>error: 
String(Object)>>shouldNotimplement 


UndefinedObject>>Dolt 
Compiler>>evaluate:in:to:notif ying:ifFail:logged:profiled: 
[] in SmalltalkEditor>>evaluateSelectionAndDo:ifFail:profiled: 


BlockClosure>>on:do: 
SmalltalkEditor>>evaluateSelectionAndDo:ifFail:profiled: 


not in a package) 


+ arg 


self 


shouldNotimplement. 
* * arg adaptT oString: self andSend: #+" 


thisContext 
all inst vars stack top 


all Mau vars 


At this point | am just going to close the debugger and ignore this as adding a string and a number really is a silly 
thing to do. But | could have written or changed some code and them re-executed the stack frame to continue the 
computation -- without unwinding the stack! 


Well, this is enough for thie brief introduction to the Cuis User Interface. 


We hope you found the tour useful and have fun with Cuis! 


Exploring morph layouts in Cuis 


This file is about how graphic entities, Morphs, may change as they are resized. 


NOTE: The examples here were done in Cuis 5; Cuis 6 is current and includes Vector Graphics and changes to 
the Morphic hierarchy. Update of the graphics is in progress. 


A Morph which contains other Morphs may be resized and wish to maintain positional relationships between the 
contained Morphs. 


We call this maintaining the submorph "layout". We want to lay out each morph in a way that they are well related. 
Cuis has LayoutMorphs which do this for their submorphs. 


Let's see how. 


Getting the layout edit panels 


First we will load two tools to help us see how LayoutMorphs and LayoutSpecs are used and what they do. 


Cuis remains small and comprehensible in part because we have Features which can be loaded as needed. Each 
Feature is in a text package which notes its requirements. To get the tools | want | open a Cuis image, Control-click to 
get the World Menu, Open a Workspace, and 


Feature require: 'Layout-Edit-Panels'. 


Feature require: 'Morphic-Miscl', 


Of course, this won't work very well unless you actually have the packaged code for this Feature. 


We assume you have Cuis set up as per https://github.com/Cuis-Smalltalk/Cuis-Smalltalk-Dev#setting-up-cuis-in- 
your-machine 


OK. I am running a Cuis image with a Workspace and have required Feature #'Layout-Edit-Panels. 


Let's create a LayoutMorph to see what it does. 


myLayout _ LayoutMorph newRow. 


Note how the underscore character gets represented in Cuis as a backward pointing arrow. This is a nice way to 
keep assignment completely separated from the equality concept. Alternatively, instead of _ you can type := as 
in Pascal. 


Note how the "syntax hilighting" in Cuis helps. Class names are bold+black, message names are blue, symbols (#) are 
bold+blue. "myLayout" is initially undefined (unrecognized) and shows up in red. This is temporary. 


| select the new text and type Cmd-d (Dolt) and see ... not much has changed, except "myLayout" is now blue. 


Feature req 


Ah! Let me open it in the current Cuis World. The Cuis backdrop is a PasteUpMorph which we call the World. 


myLayout morphExtent: 400@300; color: Color lightBlue; openInWorld. 


| took a shortcut here. | sent three messages on one line. The ';' (semicolon) character introduces a cascade. What a 
cascade does is to send messages to the original recever object. 


So the above is the same as typing: 


myLayout morphExtent: 400@300. 
myLayout color: Color lightBlue. 


myLayout openInWorld. 


Feature require: ‘Morphic-Miscl'. 
myLayout + LayoutMorph newRow, 
La = 


my norpney 


Add submorphs 


Well, a lightBlue rectangle is not much to work with. Let's add a few submorphs -- morphs which are contained in the 
lightBlue LayoutMorph. 


myLayout addMorph: (BoxedMorph new :: color: Color blue; yourself). 


Feature require: 'Morphic-Miscl'. 
myLayout + LayoutMorph newRow. 
myLayout morph 


This introduces a different shortcut: "::". The double-colon acts like ";" except that it uses the result of the previous 
message send as the target of the new message send. This shortcut is called a chain. 


If we had typed 


BoxedMorph new ; color: Color blue; 


the #color: message would have been sent to the BoxedMorph class, the target of the original message. 


BoxedMorph new :: color: Color blue 


on the other hand sends #color: to the result of (BoxedMorph new), which is a new instance of a BoxedMorph. Using 
a cascade with #yourself allows us to get the target receiver, the BoxedMorph, which is then the argument to 
#addMorph: message sent to our LayoutMorph. 


Whew! OK. No more shortcuts. But these two shortcuts, cascade and chain, are very useful. 
Back to layouts. 


Let's add a simple EllipseMorph instance 


myLayout addMorph: EllipseMorph new. 


Add a default ImageMorph, a cute little Cuis! 


myLayout addMorph: ImageMorph new. 


Your Cuis World should look something like this. 


Feature require: 'Morphic-Miscl', 

myLayout + LayoutMorph newRow. 

myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 

myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 
addMorph EllipseMo hn 


È 


We have a blue rectangle, a yellow ellipse, and a cuis image in a row. 


LayoutMorph intro 


Command-click (Windows button3, or click the mouse wheel) on the larger, lightBlue rectangle to get its 
construction halo. 


Feature require: 'Morphic-Miscl'. 

myLayout + LayoutMorph newRow. 

myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 

myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 
dd h: Elli 


Click on the blue circle at top left to get a context menu for the LayoutMorph. 


Feature require: 'Morphic-Miscl'. 

myLayout + LayoutMorph newRow. 

myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 
myLa Elli 


Select ‘edit me (a LayoutMorph)' 


Direction Separation 


dae 0 pixels 
Column 


EdgeWeight 
@left Color 


@center = 
@Right 


@specify |0.0 hexRGB 


0 pixels 


Feature require: 'Morphic-Miscl'. 

myLayout + LayoutMorph newRow. 

myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout ar amoran CH eee new :: color: Color blue; yourself), 


Let's move the LayoutEditor a bit to the right to see what is going on. Also, click on the "push pin" in the label area at 
the end of the name of the Morph whose Layout we are editing. 


If you don't click on the push-pin to keep the edit panel around, it will disappear when you click on either the Update 
or Cancel buttons. 


This is great for "one shot" changes, but we will be trying a number of things and getting a new edit panel each time 
would be tiring. 


In the EdgeWeight area of the layout edit panel, click on the Center circle. This is a "radio button" selection. Only one 
of the circles can be selected at any one time -- just like pushing the station select button on an old time radio. 


Ok. Now click the Update button below. 


Congratulations! You have just centered the submorphs in the layout row! 


Direction Separation 
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Feature require: 'Morphic-Miscl'. 

myLayout + LayoutMorph newRow. 

myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 


Let's change the LayoutMorph to be a column instead of a row. Select Direction Column and click Update. 


Direction Separation 


rte o pixels 
Column 


EdgeWeight 
@Top Color 


@ center O 
@Bottom 


OSpecify [0.5 r|75BBFD_ |hexRGB 


o pixels 


Feature require: 'Morphic-Misc1'. 

myLayout + LayoutMorph newRow. 

myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 
myLayout addMorph: EllipseMorph new. 


How about EdgeWeight Top and Update. 


Feature require: 'Morphic-Miscl'. 
myLayout + LayoutMorph newRow. 


Direction 


@Row 


@ column 


EdgeWeight 
@Top 
@center 
Bottom 


Separation 


(0 pixels 


0 pixels 


Color 


@specify 


16r|75BBFD 


lhexRGB 


myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 
i x color: Color blue; yourself), 


EdgeWeight Botton and Update. 


Feature require: 'Morphic-Miscl'. 
myLayout + LayoutMorph newRow. 
myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 


If you put your mouse pointer over the box on the right of X or Y its content will highlight. Type a value and it will 


Direction 


@Row 


@ Column 


EdgeWeight 
@Top 
® Center 
@Bottom 


Separation 


o pixels 


o pixels 


Color 


®Specify 


16r 


75BBFD |hexRGB 


overwrite what is already there. Put '10' in each box. 


The press Update. 


You should now have a 10 pixel space between the submorphs. 


Direction Separation 


ae 10 pixels 
Column 


EdgeWeight 
@Top Color 


@center C 
@Bottom 


@Specify [1.0 75BBFD |hexRGB 


10 pixels 


Feature require: 'Morphic-Miscl'. 

myLayout + LayoutMorph newRow. 

myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself), 
myLayout addMorph: EllipseMorph new. 

myLayout addMorph: ImageMorph n 


LayoutSpec intro 


So LayoutMorphs can layout submorphs in a row or a column, position submorphs along the line of the row or 
column, and set spacing between the Morphs. 


What else can we do with layouts? 


It turns out that each submorph can tell its containing LayoutMorph how it wants to be sized and placed within its 
layout. 


Command-click (Windows shift-button3) on the yellow ellipse to get its halo, select the blue circle for its context 
menu, and select ‘edit my layoutspec’. 


Note that the original command-click halos the outer Morph. Each additional click halos the next innermost Morph. 
The Morph name is in a label at the bottom of the halo. 


Move the LayoutSpec edit panel to one side and click on its push-pin. 


You should have a World which looks something like the following 


Direction Separation 
@Row x fio ixels 

@ Colum 

Tvem LE ixels 
@Top Color 
@center E 
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@specify [L0 ]|| 16r[75BBFD_JhexRGB 


Width Height offAxis EdgeWeight 
@use morph width || @use morph height | @Left/Top 
@Fixed Fixed @ Center 
@Proportional @Proportional @Right/Bottom 
@specify [0.5 


Feature reauire: Morpher Cree O a a) 


myLayout + LayoutMorph newRow. 
myLayout morph€xtent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 


myLayout addMorph: EllipseMorph new. 
mmybayout adan Morph: aimageMaren new, 


In the offAxis EdgeWeight section of the EllipseMorph's layout edit panel, click on 'Left/Top' and click on the Update 
button. 


Direction Separation 
@Row x fio ixels 
@column 

amorra eE ixels 
@Top Color 
@center L] 
@Bottom 

@specify [L0 ||) 16r[75BBFD_JhexRGB 


Width Height offAxis EdgeWeight 
@use morph width | @use morph height | @Left/Top 
@Fixed Fixed @center 
@Proportional @Proportional @Right/Bottom 
@specify [0.0 


Feature rece: Worphic Misc (cancel) ( stowiisio 


myLayout + LayoutMorph newRow. 
myLayout morphextent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 


Aha! The LayoutMorph places its submorphs in a Column along the center line, but a submorph can specify where it 
wants to be placed along the cross axis. 


By the way, we are starting to get a number of edit panels up. It can get confusing to remember the funny instance 
names for the morphs we are applying edit changes to. If you click on the ‘Show Halo’ button, or if you click on the 
‘arrowUp' icon on the title bar, the construction halo for the Morph being edited will appear. 
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Width Height offAxis EdgeWeight 
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Feature reauire: Worpie Mise (piace O oc | 


myLayout + LayoutMorph newRow. 
myLayout morph€xtent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 


myLayout addMorph: EllipseMorph new. 
mybayout adan Morph: simageMaren new, 


So it is always easy to find out who is being edited. 


OK. Let's change the column back into a row. Click on Left and Row radio buttons in the layout edit panel and 
Update to see the other orientation. What do you think will happen? 


Direction Separation 
@Row x fo ixels 
@ column 
zerra E ixels 
@Lert Color 
@center E 
@Right 
aD @specify [0.0 ||| 16r[75BBFD_JhexRGB 
Width Height offAxis EdgeWeight 
@use morph width | @use morph height | @Left/Top 
@Fixed Fixed @center 
@Proportional @Proportional @Right/Bottom 
@specify [0.0 


Feature reauire: Worphie ise Coe cases) sowie) 


myLayout + LayoutMorph newRow. 
myLayout morph€xtent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 


myLayout addMorph: EllipseMorph new. 
ava antTadanorBhallmageMorbaTh ic i iew, 


You guessed it. The ellipse is now on the top of the row instead of the left of the column. 
What else can we do with LayoutSpecs? 


Let's set the Width to a Fixed 80 pixels and the Height to 40% of the container, with a 10 pixel minimum and Update. 


Direction Separation 
Oaa ixels 
@column 

EdgeWeight 
@left 
@center 
@Right 
specify [Ox [75BBFD |hexRGB 


Width Height 
@use morph width @use morph height 


@Fixed @Fixed 
@Proportional @ Proportional 
fo 
minimum 


Feature require: 'Morphic-Misc1'. 
myLayout + LayoutMorph newRow. 

myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 
myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself). 


myLayout addMorph: EllipseMorph new. 
ga OEM Ts NagEMGT TEM! 


So when you resize the layout, the Ellipse keeps the same width, but its height is maintained at approxumately 40% 
of the LayoutMorph. 


Command click on the blue rectangle, select ‘edit my layoutspec' from its context menu, move the layoutspec edit 
panel aside and click on its push-pin. 


Now set its Height to Proportional 50% with a minimum of 10 pixels. Perhaps a Proportional Width of 80% and min 
30 pixels. Click Update. 


Direction Separation 
row x [E0 pixels 
column 
Edgeweight ||“ 0° Pixels 
@Lert Color 
@center [_ 
@Right 

a @specity [0.0 || 16r[75EBFD JhexRGB 


Width Height ffAxis EdgeWeight 
@use morph width @use morph height | @Left/Top 
‘@Fixed [Bo @Fixed @center 
@Proportional @ Proportional @Right/Bottom 
po pe @specify [0.0 


minimum [10___] pixels: 


Feature require: 'Morphic-Miscl’, 
myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 


myLayout addMorpi etMorph new :: color: Color blue; yourself), 
m; j. 


fia Width Height offAxis EdgeWeight 
z @use morph width @use morph height | @Left/Top 
(@Fixed @Fixed ‘@center 
‘@Proportional (@ Proportional G@Right/Bottom 
Bo þe Bo je @specify ps 


minimum [30__] pixels minimum [10] pixels 


Lets resize the lightBlue LayoutMorph to see how things are kept in place. 


If you ‘show halo' from the layout edit panel or command-click on the lightBlue rectangle, you can drag the yellow 
grab handle on the lower right corner of the LayoutMorph to change its size dynamically. 


Direction Separation 
Oa x Eo pixeis 
@column 
EdgeWeight ||_ 2° 8 
@Lert Color 
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@specity 0.0 ] || 16r[75BBFD_JhexRGB 


Width Height offAxis EdgeWeight 
@use morph width @use morph height | @Left/Top 
@rixed Bo ]|\@Fixed @center 
Proportional @ Proportional @Right/Bottom 
fo @specity oo 


minimum [10] pixels 


Feature require: ‘Morphic-Miscl'. 
myLayout morphExtent: 400@300; color: Color skyBlue ; openinWorld . 


myLayout addMorph: (WidgetMorph new :: color: Color blue; yourself), 


beh ae a 3 ENEA A | wah | Height offAxis EdgeWeight 
5 % @use morph width | @use morph height | @Left/Top 
@Fixed Fixed @ Center 
@Proportional @Proportional @Right/Bottam 
B0 Po [50 @specify p.5 
minimum [B0 _] pixels |minimum [10 | pixels 


By now | expect that you know what the buttons do and can play all day with layouts. 


You can use the layout and layoutSpec edit panels to test how you want your Morphs to resize within their 


containers. 
LayoutMorphs can be nested and given their own LayoutSpecs. 


In Part 2 on Layouts, we will look at the code for setting up layouts and exploring them. 


e https://github.com/Cuis-Smalltalk/Learning-Cuis/blob/master/LayoutTourPart2.md 


Exploring morph layouts in Cuis 


In LayoutTour.md we saw how LayoutMorphs and LayoutSpecs can be used to maintain layout relationships between 
Morphs in graphic code. 


Here we explore how to set up layouts in Smalltalk code. 

Along the way, we will introduce some tools as well. 

If you have not done so already, please read part 1, which includes instructions to get required Features: 
e https://github.com/Cuis-Smalltalk/Learning-Cuis/blob/master/LayoutTour.md 


Getting Started 


Note: Images not yet updated for Cuis 6 
We will start with layout of the Color Editor Panel. 


First we need to load the code for the Color Editor. 


Feature require: #'Color-Edit-Panel'. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev-spur.image 


OK. Command-Click on the World background to get the World Menu and select the ColorEditorPanel from New 
Morph..->User Interface- >A-Fon->ColorEditorPanel. 
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#'Morphic-Misc1'. 


Thus we get a handy Color Editor. 
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Color Editor Overview 


First of all, what do we have here? 


The goal of a good user interface is to provide visibility (What is here?) and control (What can | do with it?). 
Color is a very complex concept and specifying colors on computers has some interesting and deep complexities 


e https://en.wikipedia.org/wiki/HSL_and_HSV 


Fortunately, people have been working on the problem of color presentation and selection for some time. One 
solution, used here, is to present a plane, or slice, through a color cube (e.g. R|G|B = Red|Green|Blue or H|S|B = 
Hue|Saturation|Brightness) and use a Slider to move the depth of the slice/plane. 


One can click on the (2D) color plane -- see the little circle? -- and have the other elements display their values at the 
X/Y/Z coordinates of the (X,Y) plane and (Z) slice. 


In Addition to the RGB value, there is a display of the color "swatch" at that point, and the closest matching named 


color in a particular color dictionary (CSS3 web color names) along with the named color's RGB specification. 
There is also an Alpha Value slider to show the selected color with varying transparency. 


This gives us a lot of control to experiment with and specify color values. 


Layout Strategy 


Looking at the ColorEditPanel and squinting a bit, one might see three columns. The large block of color on the left, 


the slider, and a column on the right with radio buttons and the small color swatches. 


Looking at the area of radio buttons, we see that each is a row which has a label, an edit box, and possibly some 
other annotation. 


Lets look at the code to see how this is set up. 


Hierarchy Browser 


One can use the world menu to open a code browser, but another way is to command-click on the Morph of 
interest, open its menu, and select debug...-> browse morph class. 


Let's do that with the Color Editor Panel. 
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QAQA Workspace 


Feature require: #'Morphic-Miscl'. i 
Feature require: #'Morphic-ColorEditor'. 


Here is a Hierarchy Browser expanded a bit. 
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BorderedRectMorph 
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backgroundColor 
buildColorPaneColumn 
buildMorphicWindow 


initialization buildRadioButtonColumn 
buildSliderColumn 
buildSwatchLayout 
colorPane 


Panel 


caoran = events-processing 
“color updating 


{Class definition for ColorEditorPanel. 31 instance methods. 6 class methods. 271 total lines of i 
code. 


16rļ40A5D0| hexR( | 


Panel subclass: #ColorEditorPanel 
instanceVariableNames: 'colorPane colorSwatch sliderColumn closeColorSwatch 
closeColorLabel closestRGB radioSelection rgbRadio hsvRadio closestColordictColor rgbString' 
classVariableNames: " 
poolDictionaries: " 
category: 'Morphic-ColorEditor' 


| present the ColorEditor UI 


Usage: 
ColorEditorPanel open. 
ColorEditorPanel openColor: Color forestGreen. 


The reason this is called a Hierarchy Browser is that it shows a class nested with it parent class, its grandpatent class, 
and so on. 


This lets one look at inheritance of methods, how each layer of class adds some capability or refinement to its parent, 
and what "send to super" does. More on this later. 
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16r[40A5D0| hexR' 


buildMorphicWindow 
"Create a useful ColorEditor window" 


self layoutMorph beRow; " A row of columns" 
separation: 6; 
padding: #left; 
addMorph: self buildColorPaneColumn; 
addMorph: self buildSliderColumn; 
addMorph: self buildRadioButtonColumn; 
color: self backgroundColor. 


self model when: #colorChanged send: #refreshColor to: self. 


Tt self 


What we see under the 'GUI building’ category is a method named #buildMorphicWindow. 


Here we see the row of three columns. Cascades (';') are used to send multiple messages to the same LayoutMorph 
target to add the column morphs and set some attributes like color and padding. 


One can assume from #addMorph: messages in the code that each of the 'build' methods return a Morph. Easy 
enough to select the named methods and check, but let's wait a minute on that. 


Code browsers are really, really handy and we will be using them a lot, so it is useful to take the time to note some of 
the many ways they can help us out. 
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Here I have selected the name 'buildMorphicWindow' and command-clicked to get the menu for the SmalltalkEditor 
pane. 


Each such help menu is specialized for the context in which it is used. We call this ‘context sensitive’ menus. 


Right now | want to point out that there is a convention on window building to use a method called 
#buildMorphicWindow. 


Browsing 'Implementors of it' shows all the classes which implement this method. 
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ChangeListw dow buildMorphicWindow _ 
ChangeSorterWindow buildMorphicWindow 
CodeFileBrowserWindow buildMorphicWindow 


buildMorphicWindow 
"Create a pluggable version of all the morphs for a Browser in Morphic" 


| upperPanes | 

upperPanes e LayoutMorph newRow. 

upperPanes 
addMorph: self buildMorphicSystemCatList proportionalWidth: 0.2; 
addAdjusterAndMorph: self buildMorphicClassColumn proportionalWidth: 0.2; 
addAdjusterAndMorph: self buildMorphicMessageCatList proportionalWidth: 0.2; 
addAdjusterAndMorph: self buildMorphicMessageList proportionalWidth: 0.4. 


self layoutMorph 
addMorph: upperPanes proportionalHeight: 0.3; 
addAdjusterAndMorph: self buildLowerPanes proportionalHeight: 0.7. 


model changed: #editSelection 


Browsing ‘Senders of it' shows how the method is used. 
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open: model label: aString 


| window | al (non-optimized) 
window e self new. 


40A5D0| window 


model: model; 


aString otNil: 
window openinWorld. 
twindow 


addMorph: self buildSliderColumn; 
addMorph: self buildRadioButtonColumn; 
color: self backgroundColor. 


self model when: #colorChanged send: #refreshColor to: self. 


Tt self 


SystemWindow, by the way, is an important class. Most browsers are specialized SystemWindows. 
OK. Back to ColorEditPanel> >buildMorphicWindow. 


Let's select 'buildColorPlaneColumn’, which builds the column on the left. 
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buildColorPaneColumn 


| selector column hexDisplayLayout | 
selector := self defaultRadioSelector asLowercase asSymbol. 
colorPane := (ColorPaneMorph 
zSelector: self defaultRadioSelector 
zValue: (self model perform: selector) 
colorPoint: 10@10). 
colorPane updateColorFromModel: self model. 
colorPane when: #colorChanged send: #updateColorFromPane to: self. 
colorPane layoutSpec: (LayoutSpec keepMorphExtent). 


hexDisplayLayout := LayoutMorph newRow. 
hexDisplayLayout 
layoutSpec: (LayoutSpec 
proportionalWidth: 0.2 
proportionalHeight: 0.1 
minorDirectionPadding: #left); 
s 


| won't go into much detail here, but you can see that the first column has a #colorPane and a hexDisplayLayout 
which is the row of '16r[40A5D0] hexRGB' morphs. 


(Note that part of the LayoutSpec interface has changed since | wrote this. The code now changed 
minorDirectionPadding: left -> offAxisEdgeWeight: #center ) 
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Closures ° in no base system change set ° in package Morphic-ColorEditor ° 


proportionalWidth: 0.2 
proportionalHeight: 0.1 
minorDirectionPadding: #left); 
separation: 1; 
addMorph: (StringMorph new contents: '16r') 
layoutSpec: (LayoutSpec keepMorphExtent); 
addMorph: self rgbString; 
addMorph: (StringMorph new contents: ' hexRGB'); 
color: self backgroundColor. 


column := LayoutMorph newColumn. 
column 
addMorph: colorPane; 
addMorph: hexDisplayLayout; 
padding: #top; 
separation: 4; 
color: Color transparent. 


t column 


As you scroll down, you will see LayoutSpecs used to set things up. Finally, the column morph is created, the 
colorPane and hexDisplayLayout submorphs added, and the column morph is returned. 


(Note that part of the LayoutMorph interface has changed since | wrote this. The code now changed padding: 
#top; -> axisEdgeWeight: #columnTop; ) 


You can look through the other ‘build’ methods to see how the rest of the morphs are composed using Layouts and 
LayoutSpecs. 


The Model for the Editor 


Back to the code browser. | selected '-- all --' method category, moved the cursor to the method name list and typed 
the character $n. 


When you type a letter in a browser selection list, the list scrolls to show the first name starting with that character. 
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newRadioSelection: se/ectionSymbol 


16n140A5D0| hexR "Only one radio group can be selected at a time" 
( #(Red, Green, Blue) includes: selectionSymbol ) 


if True: [ self hsvRadio unselectaAll ]. 
( #(Hue Saturation Brightness) includes: se/ectionSymbol ) 
if True: [ self rgbRadio unselectAll ]. 


self colorSelectionSymbol: selectionSymbol. 

self resetSliderColumn. 

self colorPane fromModel: self model selector: se/ectionSymbol. 
self colorPane resetFocus. 


The #newRadioSelection method is invoked when one clicks on a radio button. 


This method is a ‘housekeeping’ function. It deselects the buttons which were not selected and causes the visible 
color values and controls to be updated to correspond to the new state of the control. 


When a user interface event is generated, a message is sent to the appropriate object so that it can react. More on 
events, below. In this case, the editor is reacting to a click on a radio button. 


One part of keeping the world ordered is to notify the editor's model of changes. Separating the bookkeeping for the 
editor or browser display and the editor or browser model is a pattern you will see in a number of places. 


This separation of display and model allows one to have multiple views onto a consistent, shared model. 
Let's close the browser on the ColorEditorPanel and open one on the ColorEditorModel. 


Going back to the Color Editor, command-click, select its menu, and select debug..-> browse model class. 
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Feature require: #'Morphic-Miscl'. 
Feature require: #'Morphic-ColorEditor'. 


You should now have a code browser on the ColorEditModel class. This is a very simple model! But it keeps the 
expected pattern of display/model separation. 
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Object subclass: #ColorEditorModel 
instanceVariableNames: ‘color’ 
classVariableNames: " 
poolDictionaries: " 
category: ‘'Morphic-ColorEditor' 


| am the model (state holder) for a ColorEditor. 


User Interface Events 


| mentioned user interface events above. 


There are two kinds of interactions common in computing. One is the sequential "do this then do that" algorithmic 
code. 


The other is "something happened -- deal with it". 
User interactions fall into this second kind of computation. 


One line in ColorEditPanel> >buildMorphicWindow registers 


self model when: #colorChanged send: #refreshColor to: self. 


From the World Menu, Open..->Message Names 


Type in 'when:send:to:' (without the ' quote-marks), press enter/cr, and you should see something like the next 
screen. 
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self model when: #colorChanged send: #refreshColor to: self. 


t self 


Any Smalltalk object can be the target of an event. When an event occurs, it gets dispatched based on the event 
selector message name. 


Looking up ‘senders of colorChanged', we find: 
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"Create a 


(color == aColor) if True: [ Tself ]. 

color := aColor. 

self triggerEvent: #colorChanged with: self. 
Tt self 


In ColorEditPanel > >buildRadioButtonColumn we see 


rgbRadio when: #informRadioSelection 
send: #newRadioSelection: 
to: self. 

hsvRadio when: #informRadioSelection 
send: #newRadioSelection: 


to: self. 


We already looked at ColorEditPanel> >newRadioSelection. 


Attaching event handlers to objects, particularly models, allows multiple independent observers to get updates when 
things change without changing code in the model. Multiple receivers (views) can get an update message for a single 


event. 
[User events such as mouse move, clicks, keyboard entry, and so on also turn into ordinary message sends. This 


happens mostly via a HandMorph, but hardware event processing deserves it own tutorial]. 


The Object Explorer 


Let's use an ObjectExplorer to investigate the structure of objects in the ColorEditPanel. 


The ObjectExplorer is another handy tool which shows the structure of an object -- its instance variables and their 
values. 


In a Workspace, you can type 'anObject explore’ for any Object. For a visible Morph, we can command-click, and use 
the Morph's menu to select debug..->explore morph 
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Feature require: #'Morphic-Miscl'. 
Feature require: #'Morphic-ColorEditor'. 


The ObjectExplorer has a lower pane which acts as a mini-Workspace. You can type code and Do-it (command-d). 
The upper pane acts like that in the FileList window. Clicking on a triangle shows or hides the associated structure. 


Before | dive too far into the ObjectExplorer, let me talk a bit about the difference between the ObjectExplorer and 
the object Inspector. 


We can get an Inspector on a Morph via its menu: debug->inspect morph. Do-it on 'anObject inspect’ in a 
Workspace also works. 
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@ *froot: a ColorEditorPanel(3145450)('Color Editor') 
Downer: a PasteUpMorph(1571264) [world] 


l súbmorph=: #(a LayoutMorph(922903) a WindowTitleMor 


» location: MorphicTranslation(translation 20.0@31.0) 
| layoutNeeded: false 

| layoutSpec: nil 

- properties: nil 

> extent: 660@331 

> color: Color veryVeryLightGray 


> borderWidth: 3 

» MborderColor: Color gray 
r model: a ColorEditorModel 
-widgetsColor: nil 

rh titleMorph: a WindowTitleMorph(584189) 

- tlayoutMorph: a LayoutMorph(922903) 

stayUp: false 

> mcolorPane: a ColorPaneMorph(3380164) 

+ micolorSwatch: a DropColorMorph(1779708) 

. į sliderColumn: a LayoutMorph(1152684) 

> micloseColorSwatch: a DropColorMorph(1770689) 

> secloseColorLabel: a StringMorph(2915382)'skyBlue3' 


© acolorEditorPanl(3145450)(‘Cirdtr') 
all inst vars “ MorphicTranslation(translation 
owner | 20.0@31.0) 

submorphs 
location 
layoutNeeded 
layoutSpec 
properties 
extent 

color 
borderWidth 
borderColor 
model 
widgetsColor 
titleMorph 
layoutMorph 
stayUp 
colorPane 
colorSwatch 
sliderColumn 
< moh 


> mclosestRGB: a StringMorph(1394697)'16r6CA6CD' self class ColorEditorPanel 


l 


self class MorphicTranslation 


An ObjectExplorer allows one to "drill down" through submorphs of submorphs. An Inspector shows only a single 
object (one level). 


In the mini-Workspace pane, ObjectExplorer binds #self to the value of the selected (hilighted) object. An Inspector 
binds #self to the object being inspected no matter which instance variable is hilighted. 


| selected the #location instance variable in each inspector asked 'self class' and clicked command-p (Print-It). You 
can see the result. 


Both tools are really useful, but right now | am interested in deep layout structure, so | will close the Inspecter and 
use the ObjectExplorer. 
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© a ColorEditorPanel(3145450)('Color Editor’) 


oot: a ColorEditorPanel(3145450)('Color Editor’) 
»[lowner: a PasteUpMorph(157 1264) [world] 
ysubmorphs: #(a LayoutMorph(922903) a WindowTitleMorph(584189)) 
yl: a LayoutMorph(922903) 
+} owner: a ColorEditorPanel(3145450)(‘Color Editor’) 
ysubmorphs: #(a LayoutMorph(3581890) a LayoutMorph(1152684) a Layc 
>i 1: a LayoutMorph(3581890) 
» į 2: a LayoutMorph(1152684) 


rph(9 ry 
Í submorphs: oe LayoutMorph(3704022) a ColorPaneMorph(3380164)) 
» location: MorphicTranslation(translation 6.0@6.0) 
-layoutNeeded: false 
> layoutSpec: a LayoutSpec 
- properties: nil 
> extent: 265@296 
> color: Color transparent 
- direction: #vertical 
» separation: 4 
- padding: 0.0 
>» cachedMinExtent: 260@296 
doAdoptWidgetsColor: false 


< 
self class MorphicTranslation 


Clicking on the triangles of #submorphs at each level, | see that the ColorEditPanel has a title and a LayoutMorph 


and the LayoutMorph has our three column layouts. 


An interesting thing to notice is that the order of submorphs is backward to their position when drawn. The third 


layout morph is the one left. 
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_ ¥ffroot: a ColorEditorPanel(3145450)(‘Color Editor’) 


» Towner: a PasteUpMorph(1571264) [world] 
ysubmorphs: #(a LayoutMorph(922903) a WindowTitleMorph(584189)) 
yf: a LayoutMorph(922903) 
+} owner: a ColorEditorPanel(3145450)('Color Editor’) 
ysubmorphs: #(a LayoutMorph(3581890) a LayoutMorph(1152684) a Layc 
>i 1: a LayoutMorph(3581890) 
» į 2: a LayoutMorph(1152684) 
¥™3: a LayoutMorph(706083) 
> fiowner: a LayoutMorph(922903) 
ysubmorphs: #(a LayoutMorph(3704022) a ColorPaneMorph(3380164)) 
ran a ar On soya 
L h(706083) 


> wal: a StringMorph(841574)' hexRGB' 
> a2: a SimpleNumberEntryMorph(207 0873) 
» 163: a StringMorph(1651441)'16r' 
> location: MorphicTranslation(translation 4.0@264.0) 
layoutNeeded: false 
> layoutSpec: a LayoutSpec 
properties: nil 
> extent: 209@28 


KI 
self class MorphicTranslation 


Going down another couple of levels, | find the row of '16r[40A5D0] hexRGB. 

So an ObjectExplorer is very handy tool to discover nested structure. 

Looking at the ObjectExplorer, | find however, that | can get easily lost in deep nests of Morphs. 

At this point | like to take a step back and ask a question. 

What tools do I need to help me be successful? 

How do | make things visible? How can | see how these layouts are arranged? 

Let's try some experiments. | added code to Morph which you can look at. More below. 

One idea is to draw a frame around each LayoutMorph. There happens to be a FrameMorph, so | used that. 


Shrinking the ObjectExporer and moving it aside, | type in its mini-Workspace: 


self showLayouts. 


/nome/kend/Cuis/Cuis-Smalitalk-Dev/Dev-spur.image 


3 © Color Editor 


sez] | 


16r6CA6CD 
16r[40A5D0| hexRGE skyBlue3 


© a ColorEditorPanel(3145450)('Color Editor') 
yt root: a ColorEditorPanel(3145450)('Color Editor') 
> [owner: a PasteUpMorph(157 1264) [world] 
>» submorphs: #(a LayoutMorph(922903) a WindowTitleMorph(584189)) 


AL aS EET SS eer 


| get frames around layout for five seconds, and they they disappear. 
Very interesting. 


How about boxes around the non-layout Morphs which are being placed? 


self showNonLayouts. 


/nhome/kend/Cuis/Cuis-Smalitalk-Dev/Dev-spur.image 


\) Color Editor — 


ORed [ea ] 
@Green[i65] 
OBiue [208] 
Oue  fiss]ied 
Saturation [69 _]P4 
OBrightness[g2_]Pa 
E 


161]40A5D0||/hexRGB 


@CO0@ a ColorEditorPanel(3145450)('Color Editor') 
oot: a ColorEditorPanel(3145450)(‘Color Editor’) 
>[lowner: a PasteUpMorph(1571264) [world] 
»submorphs: #(a LayoutMorph(922903) a WindowTitleMorph(584189)) 


ee eee eee Se eee ee ee se Se ee. 2 oo S S 
self showLayou 
self showNon 


elf SNOWNON 


Hmmm.. Not much difference. 
How about using dropShadows to hilight the Z-order? Give some depth to the submorphs being layed out? 


DropShadoes BROKEN in Cuis 6; Please ignore this section /home/pi/Cuis-Smalltalk/Morphic/Morphic- 
Misc1/DropShadows.cs.st 


Not everyone likes dropShadows, so the code for this is packaged as a separate change set. To include this change 
set, open a FileList (World menu > Open..> FileList), select file "DropShadow.cs.st" and click on the install button. 
Then close the FileList window. 


Now we should be able to use dropShadows with our Morphs. 


In the ObjectExplorer workspace pane.. 


self shadowNonLayouts. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev-spur.image 


© a ColorEditorPanel(3145450)('Color Editor’) 
yt root: a ColorEditorPanel(3145450)(‘Color Editor’) 
>[lowner: a PasteUpMorph(1571264) [world] 
» submorphs: #(a LayoutMorph(922903) a WindowTitleMorph(584189)) 


r Nira Bhi DA m onda T Te hn bi m bee be Bhan aAa Aa ANM 
self showLayouts. 

self showNonLayouts. 

self shadowNonLayoujs. 


© a ColorEditorPanel(3145450)(' Color r Editor’) 

Hi Fost a ColorEditorPanel(3145450)('Color Editor’) 
[Jowner: a PasteUpMorph(157 1264) [world] 

arias elas #(a LayoutMorph(922903) a WindowTitleMorph(584189)) 


le Bhi ee Be hn Te he Be Me ee he Bh DOA ODA 
self showLayouts. 

self showNonLayouts. Xx 

self shadowNonLayouts. 


Still not quite what | want. 


I'll remove the shadows now. 


self unShadowNonLayouts. 


/nhome/kend/Cuis/Cuis-Smalitalk-Dev/Dev-spur.image 


© © Color Editor — 
ORed 
@Green 
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OHue deg 
OSaturation % 
OBrightness | 


l H 16r6CA6CD 
16r[40A5D0 | hexRGB Green skyBlue3 


ða ColorEditorPanel(3145450)('Color Editor') 
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»[Jowner: a PasteUpMorph(157 1264) [world] 
»submorphs: #(a LayoutMorph(922903) a WindowTitleMorph(584189)) 
» location: MorphicTranslation(translation 20.0@31.0) 


self showLayouts. 

self showNonLayouts. 

self shadowNonLayouts. 
self unShadowNonLayouts. 


cil S. 


How about tinging row layouts red and column layouts blue? 


self colorizeLayouts. 


/home/kend/Cuis/Cuis-Smalltalk-Dev/Dev-spur.image 


Color Editor 
e o me 
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OBlue | 
Orue Eos]deg 
| 
| 
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OBrightness % 


m 16r6CA6CD 
16r[40A5D0| hexRGB Green skyBlue3 


©@ a ColorEditorPanel(3145450)('Color Editor') 
+t root: a ColorEditorPanel(3145450)('Color Editor') 
»[Jowner: a PasteUpMorph(1571264) [world] 
» submorphs: #(a LayoutMorph(922903) a WindowTitleMorph(584189)) 
> location: MorphicTranslation(translation 20.0@31.0) 


self showLayouts. 

self showNonLayouts. 

self shadowNonLayouts. 
self unShadowNonLayouts. 
self colorizeLayouts. | 


Now this | like! 


Let me command-click and use the yellow circle to drag the corner around. 


/nhome/kend/Cuis/Cuis-Smallitalk-Dev/Dev-spur.image 
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oe ba] 
@creen [s5] 
OBlue [208] 
Oħue E98]deg 
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OBrightness[52_]% 


16r[40A5D0] hexRGB Green a 


Color Editor 


16r6CA6CD 
skyBlue3 


»2I(3145450)('Color Ector’) 
.45450)(‘Color Editor’) | Change size 
> (Downer: a SEIS Sy 1264) [world] 
» submorphs: #(a LayoutMorph(922903) a WindowTitleMorph(584189)) 
» location: MorphicTranslation(translation 20.0@31.0) 


self showLayouts. 

self showNonLayouts. 

self shadowNonLayouts. 
self unShadowNonLayouts. 
self colorizeLayouts. 


Wow. This looks helpful to me. | see the layouts as they are resized. 


Now | have a number of ways to adjust visual relations between morphs. | can use code browsers. | can use the 
ObjectExplorer. | can use a LayoutMorphEditPanel or LayoutSpecEditPanel. | can #colorizeLayout's and resize 
containing morphs. 


Well, this is getting long. | had better quit now. 
| hope this was helpful. 


Look at the code. Have some fun with it! 


